.calendar {
  display: flex;
  flex-direction: column;
}

.calendar-content {
  display: flex;
  padding: var(--bl-size-m);
  flex-direction: column;
  align-items: center;
  gap: var(--bl-size-m);
  border-radius: var(--bl-border-radius-s);
  width: fit-content;
  background: var(--bl-color-neutral-full);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding-bottom: var(--bl-size-s);
}

.arrow {
  flex: 1;
}

:host([dir="rtl"]) .arrow {
  transform: scale(-1);
}

.header-text {
  flex: 3;
}

.header-text-hover {
  background: var(--bl-color-neutral-lightest);
  border-radius: var(--bl-border-radius-s);
}

.days-wrapper {
  display: flex;
  flex-direction: column;
}

.day-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding-bottom: var(--bl-size-2xs);
}

.day {
  display: flex;
  align-items: center;
  width: 40px;

  --bl-button-focus-border-color: #000;
  --bl-font-title-4-medium: var(--bl-font-weight-regular) var(--bl-font-size-m);
  --bl-size-xl: 40px;
  --bl-border-radius-m: 50%;
  --bl-border-radius-l: 50%;
}

.day.today-day {
  --bl-color-neutral-darker: var(--bl-color-primary);
  --bl-color-neutral-darkest: var(--bl-color-primary);
}

.day.other-month-day {
  --bl-color-neutral-darker: var(--bl-color-neutral-dark);
}

.day.other-month-day.selected-day {
  --bl-color-neutral-darker: var(--bl-color-neutral-full);
}

.day.selected-day {
  background: var(--bl-color-primary);
  border-radius: 50%;

  --bl-button-focus-border-color: var(--bl-color-primary);
  --bl-color-neutral-darker: var(--bl-color-neutral-full);
}

.range-day {
  background: var(--bl-color-primary-contrast);

  --bl-color-neutral-lightest: var(--bl-color-primary-contrast);
}

.range-end-day,
.range-start-day,
.selected-day {
  --bl-color-neutral-lightest: var(--bl-color-primary);
  --bl-color-neutral-darker: var(--bl-color-neutral-full);
  --bl-color-neutral-darkest: var(--bl-color-neutral-full) !important;
}

.range-start-day {
  background: var(--bl-color-primary-contrast);
  border-start-start-radius: 50%;
  border-end-start-radius: 50%;
}

.range-end-day {
  background: var(--bl-color-primary-contrast);
  border-start-end-radius: 50%;
  border-end-end-radius: 50%;
}

.weekday-text {
  color: var(--bl-color-neutral-dark);
  text-align: center;
  padding: var(--bl-size-2xs) 0;
  width: 40px;
}

.grid-content {
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
}

.grid-item {
  width: 93.33px;

  --bl-size-3xs: 15px;
}

.grid-item:not(:nth-last-child(-n + 3)) {
  padding-bottom: var(--bl-size-2xs);
}

.calendar-text {
  font: var(--bl-font-title-3-regular);
}
